<template>
  <div class="menu-class">
    <el-menu
      mode="vertical"
      class="el-menu-vertical-demo"
      default-active="index"
      :collapse="data.collapse"
      @open="handleOpen"
      @close="handleClose"
      unique-opened="true"
      :collapse-transition="false">
      <yu-child-menu :childData="data.menuData"></yu-child-menu>
    </el-menu>
  </div>
</template>

<script setup>
  import YuChildMenu from './YuChildMenu.vue';
  import { reactive, ref, onMounted, getCurrentInstance, computed } from 'vue';
  import { systemStore } from '@/pinia/system';
  import { storeToRefs } from 'pinia';
  let store = storeToRefs(systemStore());
  const data = reactive({
    menuData: store.menu,
    collapse: store.collapse,
  });

  const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath);
  };
  const handleClose = (key, keyPath) => {
    // console.log(key, keyPath);
  };
</script>
<style lang="scss" scoped>
  .menu-class {
    height: 90vh; // 必须设定滚动部分的高度
    color: antiquewhite;
    overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/
  }
  .menu-class::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }
</style>
